<template>
  <div class="goods-list">
    <div class="goods-header">
      <slot name="title">这是默认标题</slot>
    </div>
    <ul class="goods-box">
      <router-link
        tag="li"
        class="goods-item"
        :to="'/info/' + item.goodsId"
        v-for="(item, index) in dataList"
        :key="index"
      >
        <div class="img-box">
          <img :src="item.goodsCoverImg" alt="" />
        </div>
        <div class="goods-desc">
          <div class="title">{{ item.goodsName }}</div>
          <div class="price">￥{{ item.sellingPrice | moneyFormat }}</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: "GoodsList",
  props: {
    dataList: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.goods-list {
  width: 100%;
  text-align: center;
  .goods-header {
    height: 40px;
    line-height: 40px;
    color: #1baeae;
    background-color: #f9f9f9;
  }
  .goods-box {
    display: flex;
    flex-wrap: wrap;
    .goods-item {
      width: 49%;
      border: 1px solid #f9f9f9;
      padding-top: 10px;
      padding-bottom: 10px;
      .img-box {
        width: 60%;
        height: 120px;
        margin: 0 auto;
        img {
          width: 100%;
          height: auto;
        }
      }
      .goods-desc {
        .title {
          color: #000;
          font-size: 14px;
        }
        .price {
          color: #1baeae;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
